$iceColor: #99ffff; // 设置变量

.test1 {
  color: darken($iceColor, 20%); // 颜色函数
  color: lighten($iceColor, 10%);
  color: grayscale($iceColor);
  color: complement($iceColor);
}

.test2 {
  @extend .test1; // 继承
}

@mixin circle($r: 50%) { // 混入，可以指定参数与缺省值
  border-radius: $r;
}

.test3 {
  @include circle; // 使用混入
}

.test4 {
  .test4-item {          // 选择器嵌套
    border: {            // 属性嵌套
      color: $iceColor;
      width: (10px/2);   // 计算
    }
  }
}

@each $name, $color, $size in (first, red, 12px,), (second, blue, 16px), (third, green, 18px) { // each 多重赋值
  .#{$name} {
    color: $color;
    font-size: $size;
  }
}

@for $i from 5 to 7 {    // for循环
  .test#{$i} {
    display: flex;
  }
}

$i: 7;
@while $i < 10 {         // while循环
  .test#{$i} {
    width: 100px * $i;
    height: 88px * $i;
  }
  $i: $i + 1;
}

@if $i > 10 {            // 条件判断
  .test#{$i} {
    background: {
      color: #345 * $i;
    }
  }
} @else if $i > 5{
  .test#{$i} {
    background: {
      image: url("./img/#{$i}.jpg");
    }
  }
} @else {
  .test#{$i} {
    background: linear-gradient(90deg, lightseagreen 30%, transparent 70%);
  }
}

@function double($n) {  // 自定义函数
  @return $n * 2;
}

.test11 {
  width: double(333px);
}